<script setup lang="ts">
import { ref, watch } from 'vue';

import { searchImg } from '#/api';

const props = defineProps({
  image: {
    type: String,
    default: '',
  },
});
const $emit = defineEmits(['ok']);
const aiTitleBoxState = defineModel();
const getTitleLodinStatus = ref(false);
const aiTitleList: any = ref([]);
const selectItemValue = ref();

watch(aiTitleBoxState, () => {
  if (aiTitleBoxState.value) {
    getTitleLodinStatus.value = true;
    selectItemValue.value = '';
    searchImg({
      imgUrl: props.image,
      filters: '',
      imageKeywords: '',
    })
      .then((res) => {
        if (res && res.length > 0) {
          const loukai = [
            ...new Set(
              res.map((titles: any) => {
                return titles.subject;
              }),
            ),
          ];
          aiTitleList.value = loukai;
        }
      })
      .finally(() => {
        getTitleLodinStatus.value = false;
      });
  }
});
</script>

<template>
  <a-modal
    :visible="aiTitleBoxState"
    title="AI标题"
    width="800px"
    @cancel="aiTitleBoxState = false"
    @ok="$emit('ok', selectItemValue)"
  >
    <a-spin :spinning="getTitleLodinStatus">
      <a-radio-group
        v-if="aiTitleList && aiTitleList.length > 0"
        v-model:value="selectItemValue"
      >
        <a-space direction="vertical">
          <a-radio v-for="item in aiTitleList" :key="item" :value="item">
            {{ item }}
          </a-radio>
        </a-space>
      </a-radio-group>
      <div v-else>
        <a-empty
          :description="
            getTitleLodinStatus
              ? '正在加载AI标题。。。'
              : '暂时没有可用AI标题,请稍后再试'
          "
        />
      </div>
    </a-spin>
  </a-modal>
</template>
